<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        // input.addEventListener('keyup', function () {
        // console.log('发起请求')
        // 想要的效果？
        // 1. 抬起一个键，不会立马发送请求，我们可以给一个延迟等待的时间 200ms
        // 2. 如果在200ms内，我按下后抬起了一个键，又重新按一个键，重新计时
        // 3. 只有当最后一次按下键抬起，超过了200ms后，才会执行发送请求的代码
        // })

        // ==> 多次密集的触发，只执行一次

        // 防抖：debounce
        // 当持续触发事件时，一定时间内没有再触发事件，回调函数才会执行一次
        // 如果设定延迟时间到来之前，又触发了事件，就重新计算延迟
        const sendMsg = function () {
            console.log('发起了请求')
        }
        const debounce = (fn, ms) => {
            return function () {
                fn()
            }
        }

        input.addEventListener('keyup', debounce(sendMsg, 200))

    </script>
</body>

</html>